<template>
  <div class="filter">
    <div v-if="!selectedComponent.filter">
      <div class="btn" @click="addFilter">新增筛选器</div>
    </div>
    <div v-else class="f-data">
      <div class="mask">
        <el-button type="success" size="small" @click="addFilter"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="delFilter"
          >删除</el-button
        >
      </div>
      <div class="inp">
        <p>
          <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data,
          res)&nbsp;&nbsp;{
        </p>
        <el-input
          v-model="selectedComponent.filter"
          readonly
          resize="none"
          type="textarea"
          class="inp-code"
        />
        <p>}</p>
      </div>
    </div>

    <filterEdit v-model:filterShow="filterShow" />
  </div>
</template>
<script setup>
import { computed, ref } from "vue"
import { useStore } from "vuex"
import filterEdit from "./monacoEditor/filterEdit.vue"

let store = useStore()

let selectedComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent
})

let filterShow = ref(false)

function addFilter() {
  filterShow.value = true
}

function delFilter() {
  ElMessageBox.confirm("确定删除该筛选器？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      selectedComponent.value.filter = ""
    })
    .catch(e => {})
}
</script>
<style scoped lang="scss">
.filter {
  .btn {
    width: 80%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
  }
  .f-data {
    position: relative;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: none;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 10px;
      border-radius: 5px;
    }
    &:hover {
      .mask {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }
    .inp {
      padding: 10px 5px;
      max-height: 200px;
      background: #d9d9d9;
      border-radius: 5px;
      .func-keyword {
        color: #b478cf;
      }
      :deep(.el-textarea__inner) {
        max-height: 200px;
        background: #d9d9d9 !important;
        color: #000 !important;
      }
    }
  }
}
</style>
